import React, { useState, useEffect } from "react";
import { connect, useSelector } from 'react-redux'
import { Row, Col, Carousel, BackTop, Button, Divider, Image } from 'antd';
import { CommentOutlined, ClockCircleOutlined, WechatOutlined, QqOutlined, PhoneOutlined } from '@ant-design/icons'
import AppCss from '../modlue.css/Home.module.css'
import Item from "antd/lib/list/Item";
import request from '../utils/request'

import Nav from "./Nav"


const imgStyle = {
    height: '100%',
    width: '100%',
};

const H3text = {
    color: '#ff6727',
}

const Ct11text = [
    {
        title: '跨平台，跨设备',
        text: '你可以在Windows、iOS、安卓使用银豹进',
        text2: '行收银和生意管理，无需额外购买收银机。'
    },
    {
        title: '零IT成本',
        text: '你将获得一套含收银系统、ERP、CRM、',
        text2: 'SCM的业务管理系统,更新和配套服务都交给我们.'
    },
    {
        title: '跨平台，跨设备',
        text: '银豹提供专业的咨询顾问，为你提供远程',
        text2: '行收银和生意管理，无需额外购买收银机。'
    },
]

const industrybutton = [
    { text: '我是零售行业' },
    { text: '我是餐饮行业' },
    { text: '我是专卖行业' },
]

function Home() {
    const [data, setdata] = useState([])

    useEffect(() => {
        request.get('/goods/home').then(({ data }) => {
            
            setdata([...data.data])

        })
    }, []);
    console.log(data)


    return (<div >
        <Nav/>
        <Carousel autoplay easing >
            <div>
                <a ><img src="https://imgb.pospal.cn/advertsystem/官网轮播 (1)1659926286888687542.png" style={imgStyle} /></a>
            </div>
            <div>
                <a ><img src="https://imgb.pospal.cn/advertsystem/官网banner位 (3)1659322075887736871.png" style={imgStyle} /></a>
            </div>
            <div>
                <a ><img src="https://imgb.pospal.cn/advertsystem/{91F6818A-9E00-DB05-78F5-B9E464748C9B}1658371626439804267.jpg" style={imgStyle} /></a>
            </div>
        </Carousel>
        {/* <img src='https://pospal.cn/main/resource/image/main/section/section_2.jpg' style={{ width: '1519px', height: '100%' ,position:'relative'}}></img> */}
        <Row className={AppCss.Contont2}>
            <Col style={{ display: 'inline-block', textAlign: 'center', position: 'absolute', top: '140px', left: '342px' }}>
                <h3 style={H3text}>满足门店所需</h3>
                <p style={{ fontSize: '13px' }}>从收银、门店管理、供应链、会员营<br />
                    销到O2O,都可以用银豹一站式实现</p>
            </Col>
            <Col style={{ display: 'inline-block', textAlign: 'center', position: 'absolute', top: '140px', left: '637px' }}>
                <h3 style={H3text}>适合多种行业</h3>
                <p style={{ fontSize: '13px' }}>真正做到一套系统支持零售、餐饮、<br />
                    服装、母婴、生活服务等行业</p>
            </Col>
            <Col style={{ textAlign: 'center', position: 'absolute', top: '140px', left: '930px' }}>
                <h3 style={H3text}>增长你的生意</h3>
                <p style={{ fontSize: '13px' }}>内置50+种生意报表和主流营销功能，深入<br />
                    分析生意的同时，将营销对准合适的客户</p>
            </Col>
        </Row>
        <Row className={AppCss.Contont3}>
            <Col className={AppCss.Main_text1}>一站式拥有,满足门店所需</Col>
            <Col className={AppCss.Main_text2}>
                <Col style={{ fontSize: '18px' }}>银豹收银系统</Col>
                <Col style={{ fontSize: '25px', color: '#ff6727', marginTop: '5px', marginBottom: '5px' }}>让业绩飞起来</Col>
                <Col style={{ fontSize: '15px', color: '#837f7d' }}>支持多种移动支付方式,无缝集成3大外卖平台<br />
                    真正多平台,多行业覆盖的新一代收银系统</Col>
            </Col>
            <Button className={AppCss.Main_text2_btn}>了解银豹收银系统</Button>
        </Row>
        <Row className={AppCss.Contont4}>
            <Col className={AppCss.Main_text3}>
                <Col style={{ fontSize: '18px' }}>银豹云后台</Col>
                <Col style={{ fontSize: '25px', color: '#ff6727', marginTop: '5px', marginBottom: '5px' }}>让生意一手掌握</Col>
                <Col style={{ fontSize: '15px', color: '#837f7d' }}>一个系统就能管理你的生意，多端同步，用手<br />
                    机即可查询报表、商品、会员营销和货流尽在掌握</Col>
            </Col>
            <Button className={AppCss.Main_text3_btn}>了解银豹云后台</Button>
        </Row>
        <Row className={AppCss.Contont5}>
            <Col className={AppCss.Main_text4}>
                <Col style={{ fontSize: '18px' }}>银豹微信店铺</Col>
                <Col style={{ fontSize: '25px', color: '#ff6727', marginTop: '5px', marginBottom: '5px' }}>让O2O没有门槛</Col>
                <Col style={{ fontSize: '15px', color: '#837f7d' }}>自动同步你的门店商品信息到你的手机店铺，利用在线商城<br />
                    外卖送餐、预约服务、会员服务,帮您真正实现O2O智能门店</Col>
            </Col>
            <Button className={AppCss.Main_text4_btn}>了解银豹微信店铺</Button>
        </Row>
        <Row className={AppCss.Contont6}>
            <Col className={AppCss.Main_text5}>
                <Col style={{ fontSize: '18px' }}>银豹移动CRM</Col>
                <Col style={{ fontSize: '25px', color: '#ff6727', marginTop: '5px', marginBottom: '5px' }}>让访客都成为回头客</Col>
                <Col style={{ fontSize: '15px', color: '#837f7d' }}>在手机上随时查看自己的会员信息和消费记录，你还可以自定义<br />
                    条件轻松筛选出活跃会员和潜水会员，一键推送营销信息</Col>
            </Col>
            <Button className={AppCss.Main_text5_btn}>了解银豹移动CRM</Button>
        </Row>
        <Row className={AppCss.Contont7} style={{ position: 'relative', padding: '320px 0 0 420px' }}>
            <Col style={{ position: 'absolute', fontSize: '40px', top: '70px', left: '450px' }}>多种行业，都能找到你的制胜法宝</Col>

            {industrybutton.map(item => {
                return <Col key={item.id} span={4} offset={1} style={{ marginRight: '10px' }}>
                    <Button style={{ height: '52px', borderColor: '#ff6727', color: '#ff6727' }}>{item.text}</Button>
                </Col>
            })}
        </Row>
        <Row className={AppCss.Contont8} style={{ position: 'relative' }}>
            <Col style={{ position: 'absolute', fontSize: '60px', top: '126px', left: '317px', color: '#e6c6a1' }}>12</Col>
            <Col style={{ position: 'absolute', fontSize: '60px', top: '126px', left: '650px', color: '#e6c6a1' }}>200</Col>
            <Col style={{ position: 'absolute', fontSize: '60px', top: '126px', left: '955px', color: '#e6c6a1' }}>7×12</Col>
        </Row>
        <Row className={AppCss.Contont9} style={{ position: 'relative' }}>
            <Col style={{ position: 'absolute', fontSize: '60px', top: '126px', left: '530px', color: '#e6c6a1' }}>200万企业都在用</Col>
            <a style={{ position: 'absolute', fontSize: '22px', top: '760px', left: '680px', color: '#e6c6a1' }}>查看所有案例 </a>
        </Row>
        <Row className={AppCss.Contont10} style={{ position: 'relative' }}>
            <div style={{ position: 'absolute', fontSize: '40px', top: '100px', left: '560px' }}>一册在手，开店无忧</div>
            <div style={{ position: 'absolute', fontSize: '18px', top: '180px', left: '445px', color: '#7f7f7f' }}>银豹联合国际知名咨询公司，联手打造行业白皮书，助您创业路上超越自我
            </div>
            <Row style={{ padding: '240px 0 0 200px', height: '465px', marginLeft: '50px' }}>
                {data.map(item => {
                    return <Col  key={item.id} span={4} style={{ textAlign: 'center', boxShadow: '1px 1px 5px #888', marginRight: '10px' }}>
                        <h2 style={{ margin: '0px' }}>{item.title}</h2>
                        <div style={{ marginBottom: '10px' }}><a>{item.download}</a></div>
                        <img src={`/img/`+item.imgurl} style={{ width: '100%' }}></img>
                    </Col>
                })}
            </Row>
        </Row>
        <div className={AppCss.Contont11} style={{ textAlign: 'center', boxSizing: 'border-box', paddingLeft: '100px' }}>
            {/* <Row style={{height:'300px'}}> */}
            <h1 style={{ color: '#ff6727', height: '300px', padding: '70px 150px 0 0' }}>选择银豹，帮你赚钱的生意管家</h1>
            <Row >
                {Ct11text.map(item => {
                    return <Col key={item.id} span={6} offset={1}  >
                        <h2>{item.title}</h2>
                        <p>{item.text}</p>
                        <p>{item.text2}</p>
                    </Col>
                })}

            </Row>
            <Button style={{ margin: '42px 110px 0 0', height: '60px', width: '230px', borderColor: '#ff6727', color: '#fff', backgroundColor: '#ff6727', fontSize: '20px' }}>免费体验</Button>
        </div>
        <Row className={AppCss.footer} style={{ padding: '150px 0 0 230px', color: '#fff' }}>

            <Col span={2}>
                <p>联系我们</p>
                <div>工作时间</div>
                <div >服务热线</div>
                <div >QQ售前咨询</div>
                <div >QQ投诉通道</div>
            </Col>
            <Col span={2} style={{ paddingTop: '30px', color: 'gray' }}>
                <div>9:00 - 21:00</div>
                <div>400-806-6866</div>
                <div>800008626</div>
                <div >3487430600</div>
            </Col>


            <Col span={6} offset={2} >
                <p>拨打专线更快响应哦</p>
                <div style={{ color: 'gray' }}>
                    <div >渠道合作&#x3000;0592-5932122</div>
                    <div >市场推广&#x3000;0592-3330160</div>
                    <div >连锁客户&#x3000;0592-5107006</div>
                    <div >廉洁合规&#x3000;17350856909</div>
                </div>
            </Col>

            <Col span={6} >
                <p>资质证照</p>
                <div>
                    工商营业执照
                </div>
                <div >
                    增值电信业务经营许可证
                </div>
            </Col>

            <Col >
                <p style={{ color: '#fff', marginBottom: '15px' }}><WechatOutlined />&nbsp;&nbsp;微信咨询</p>
                <div style={{ marginBottom: '15px' }}><Image preview={false} height={99} width={99} src="http://case.pospal.cn/wp-content/themes/yinbaoV2/images/wx-qrcode.png" />
                </div>
                <div style={{ color: '#ebebeb' }}>微信扫一扫或者</div>
                <div style={{ color: '#ebebeb' }}>搜索“银豹收银”</div>
            </Col>

            <div style={{ position: 'absolute', top: '390px', left: ' 220px', width: ' 1100px', height: '2px', backgroundColor: ' #383536' }}></div>

            <Col span={10} offset={5}>
                <div style={{marginTop:'70px'}}>
                    <i>< a href="">版本更新&nbsp;&nbsp;|</ a></i><i>< a href="">&nbsp;支持社区&nbsp;&nbsp;|</ a></i>
                    <i>< a href="">&nbsp;银豹博客&nbsp;&nbsp;|</ a></i><i>< a href="">&nbsp;渠道合作&nbsp;&nbsp;|</ a></i>
                    <i>< a href="">&nbsp;开放平台&nbsp;&nbsp;|</ a></i><i>< a href="">&nbsp;关于我们&nbsp;&nbsp;|</ a></i>
                    <i style={{ borderRight: 'none' }}>< a href="">&nbsp;联系我们&nbsp;&nbsp;</ a></i>
                    <div style={{ marginTop: '10px',fontSize:'10px',textAlign:'center'}}>
                    <div >2010-2016  Copyright. Zhundong Network - All Rights Reserved</div>
                    <div>准动网络科技（厦门）有限公司版权所有</div>
                    </div>

                </div>
            </Col>
        </Row>

    </div>
    )
}
export default Home